<template>
	<div>

		<div class="main_content">
			<el-row :gutter="20" style="width: 100%;height: 4.875rem;line-height:4.875rem;">
				<el-col :span="10">
					<div style="margin-left: 4.875rem;">
						<h2>{{Classname}}</h2>
					</div>
				</el-col>
				<el-col :span="12" style="font-size: 1.1rem;">
					<span class="Font" :class="{active:Item.value==isactive}" @click="Changenav(Item)" v-for="Item in Nevdata">{{Item.name}}</span>

				</el-col>
				<el-col :span="2">
					<el-dropdown style="margin-top: 0.8rem;">
						<span class="el-dropdown-link">
							<el-avatar :src="userPhoto"></el-avatar>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item @click.native="$router.push('/CourseCentermain')">返回首页</el-dropdown-item>
							<el-dropdown-item @click.native="Person">个人信息</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</el-col>
			</el-row>
			<div>
				<router-view></router-view>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			const data = [{
				id: 1,
				label: '一级 1',
				children: [{
					id: 4,
					label: '二级 1-1',
				}]
			}, {
				id: 2,
				label: '一级 2',
				children: [{
					id: 5,
					label: '二级 2-1'
				}, {
					id: 6,
					label: '二级 2-2'
				}]
			}, {
				id: 3,
				label: '一级 3',
				children: [{
					id: 7,
					label: '二级 3-1'
				}, {
					id: 8,
					label: '二级 3-2'
				}]
			}];
			return {
				data: JSON.parse(JSON.stringify(data)),
				Nevdata: [{
						value: 1,
						name: "首页"
					}, {
						value: 2,
						name: "作业"
					},
					{
						value: 3,
						name: "考试"
					},
					{
						value: 4,
						name: "资料库"
					}, {
						value: 5,
						name: "学习记录"
					}
				],
				isactive: 1,
				userPhoto:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
				Classname:''
			}
		},
		methods: {
			handleOpen() {

			},
			handleClose() {

			},
			Changenav(Item) {
				this.isactive = Item.value;
				if (this.isactive == 1) {
					this.$router.push('/chapterstu');
				} else if (this.isactive == 2) {
					this.$router.push("/workstu");
				} else if (this.isactive == 3) {
					this.$router.push("/teststu");
				} else if (this.isactive == 4) {
					this.$router.push("/meanstu");
				} else if (this.isactive == 5) {
					this.$router.push('/LearningRecords');
				}
			},
			Home() {
				this.$router.push("/Home");
			},
			append(data) {
				const newChild = {
					id: id++,
					label: 'testtest',
					children: []
				};
				if (!data.children) {
					this.$set(data, 'children', []);
				}
				data.children.push(newChild);
			},

			remove(node, data) {
				const parent = node.parent;
				const children = parent.data.children || parent.data;
				const index = children.findIndex(d => d.id === data.id);
				children.splice(index, 1);
			},

			chapter() {
				this.$router.push("/chapterstu");
			},
			ClassList() {
				this.$router.push("/ClassListstu");
			},
			Administration() {
				this.$router.push("/Administrationstu");
			},
			chapterstu() {
				this.$router.push("/chapterstu");
			}


		},
		created() {
			if (localStorage.getItem("userPhoto")) {
				this.userPhoto = localStorage.getItem("userPhoto");
			}
			this.Classname=localStorage.getItem("Classname")
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.main {
		width: 100%;
		height: 4.25rem;
		line-height: 4.25rem;
		display: flex;
		justify-content: space-between;
		color: white;
		background-color: #03d3bd;
	}

	.main>div {

		margin-left: 20px;
		margin-right: 1.25rem;
	}

	.Font {
		margin-left: 1.875rem;
		cursor: pointer;
	}

	.Font:hover {
		color: #03d3bd;
		font-weight: 900;
	}

	.active {
		color: #03d3bd;
		font-weight: 900;
		// margin-left: 20px;
	}
</style>
